import React, { Component } from 'react'
import { Text, StyleSheet, View, ScrollView, Image, TextInput, TouchableOpacity } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createDrawerNavigator } from '@react-navigation/drawer';

import MainScreen from './Main'
import SettingsAvatarScreen from './Settings/Avatar'
import SettingsNicknameScreen from './Settings/Nickname'
import SettingsIdCardScreen from './Settings/IdCard'

const Drawer = createDrawerNavigator();

export default class index extends Component {

  render() {
    return (
      <Drawer.Navigator 
        initialRouteName="Main" 
        drawerPosition={'right'} // 菜单右侧显示
        drawerType="slide" // 设置菜单动画效果
        drawerStyle={{
          backgroundColor: '#cdb', // 设置菜单背景色
          width: 180, // 设置菜单宽度
        }}
        drawerContentOptions={{
          activeTintColor: '#e91e63', // 设置活跃字体颜色
          itemStyle: { // 设置菜单项样式
            marginVertical: 10 // 设置菜单的垂直外间距
          },
        }}
        // minSwipeDistance={20}
      >
        <Drawer.Screen name="SettingsAvatar" component={SettingsAvatarScreen}
          options={{
            title: '设置',
            headerStyle: {
              backgroundColor: 'tomato',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerShown: false,
            headerTitleAlign:"center"
          }}
          // options={{ 
          //   title: '设置头像',
          //   header: ({ scene }) => {
          //     const { options } = scene.descriptor;
          //     const title =
          //       options.headerTitle !== undefined
          //         ? options.headerTitle
          //         : options.title !== undefined
          //         ? options.title
          //         : scene.route.name;
            
          //     return (
          //       <MyHeader
          //         title={title}
          //         leftButton={
          //           <DrawerToggleButton
          //             onPress={scene.descriptor.navigation.toggleDrawer}
          //           />
          //         }
          //         style={options.headerStyle}
          //       />
          //     );
          //   }
          // }} 
        />
        <Drawer.Screen name="Main" component={MainScreen} options={{ 
          title: '个人中心'
        }} />
        
        <Drawer.Screen name="SettingsNickname" component={SettingsNicknameScreen} options={{ title: '设置昵称', drawerLabel: '昵称' }} />
        <Drawer.Screen name="SettingsIdCard" component={SettingsIdCardScreen} options={{ title: '身份证' }} />
      </Drawer.Navigator>
    )
  }
}

const styles = StyleSheet.create({
  container: {

    flexDirection: 'column',
    justifyContent: 'flex-start'
  },
  h2: {
    fontSize: 40,
    fontWeight: 'bold'
  },
  listItem: {
    paddingHorizontal: 20,
    height: 50, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd'
  }
})
